---
title: Getting Started with Teaful
---

import FeedbackRating from '../components/feedback-rating';

# Getting Started

## Installation

```sh
yarn add teaful
```

## Create your store

A store can be created using the `createStore` function. It returns all the methods you need to consume and update the store properties.

```js
import createStore from 'teaful';

const { useStore } = createStore();
```

Or define an initial state for your store:

```js
const initialState = {
  cart: {
    price: 0,
    items: [],
  }
};

const { useStore } = createStore(initialState);
```

Or also with a function that is called every time a store property is updated:

```js
const initialState = {
  cart: {
    price: 0,
    items: [],
  }
};

function onAfterUpdate({ store, prevStore }) {
  console.log(`${prevValue} changed to ${value}`);
}

const { useStore } = createStore(initialState, onAfterUpdate);
```

import Callout from 'nextra-theme-docs/callout';

## How to export correctly?

Export the function(s) you want to use as constants from the file

```js
export const { useStore, getStore, withStore } = createStore();
```

Or you can have a default export like this:

```js
const { useStore } = createStore();

export default useStore;
```

<Callout type="error" emoji="🚫">
Do not use a default export like the following one
</Callout>

```js
export default createStore();
```

If you export the store in the above mentioned way, the following import will not work:

```js
import { useStore } from '../store';
```

### Input Parameters

| name            | type          | required | description                                                                                              |
| --------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------- |
| `initialStore`  | `object<any>` | `false`  | Object with your initial store.                                                                          |
| `onAfterUpdate` | `function`    | `false`  | Function that is executed after each property change. More [details](./methods/listeners). |

### Return Value

| name        | type    | description                                                                                                                                                                                             | example                                           |
| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| `useStore`  | `Proxy` | Proxy hook to consume and update store properties inside your components. Each time the value changes, the component is rendered again with the new value. More [info](./methods/use-store).                 | `const [price, setPrice] = useStore.cart.price()` |
| `getStore`  | `Proxy` | Similar to `useStore` but without subscription. You can use it as a helper outside (or inside) components. Note that if the value changes, it does not cause a rerender. More [info](./methods/get-store). | `const [price, setPrice] = getStore.cart.price()` |
| `withStore` | `Proxy` | HoC with `useStore` inside. Useful for components that are not functional. More [info](./methods/with-store).                                                                                                 | `withStore.cart.price(MyComponent)`               |

<FeedbackRating />
